<template>
  <div class="itembank">
 		<div class="item_top_headder">
 			<el-row :gutter="24">
 				<el-col span="6" >
 					<el-col class="top_item" >
				  	<el-button @click="goAdd" type="primary" icon="fa fa-wpforms fa-lg" plain>添加试题</el-button>
				  </el-col>
 				</el-col>
			  <el-col span="18">
			  	<el-row type="flex" class="row-bg" justify="end">
			  			<div class="search_advanced">
						  	<el-popover
								  placement="bottom"
								  title="搜索"
								  width="350"
								  trigger="click">
								  <div class="search_item">
								  	<p>试卷标题: <el-input v-model="title" style="width: 200px;margin-left: 10px;" placeholder="输入试卷标题进行搜索"></el-input></p>
								  	<p>试卷题型: <el-input v-model="bundle" style="width: 200px;margin-left: 10px;" placeholder="输入试卷类别进行搜索"></el-input></p>
								  	<p>试卷难度: <!--试题难度-->
											<el-dropdown style="margin-left: 10px;" @command = "levelCheck">
											  <el-button plain>
											    试题难度:{{levelIn}}<i class="el-icon-arrow-down el-icon--right"></i>
											  </el-button>
											  <el-dropdown-menu slot="dropdown">
											    <el-dropdown-item command="简单">简单</el-dropdown-item>
											    <el-dropdown-item command="普通">普通</el-dropdown-item>
											    <el-dropdown-item command="困难">困难</el-dropdown-item>
											  </el-dropdown-menu>
											</el-dropdown>
								  	</p>
								  	<p>试卷分类: <el-input v-model="pid" style="width: 200px;margin-left: 10px;" placeholder="输入试卷分类进行搜索"></el-input></p>
								  	<p><el-button @click="questionSearch(0)">搜索</el-button><el-button @click="clearSearch">重置</el-button></p>
								  </div>
								  <div slot="reference">高级搜索	<i class="fa fa-chevron-down fa-lg"></i></div>
								</el-popover>
						  </div>
			  		
					  	<el-col class="top_item" :span="10" >
						  	<el-input placeholder="请输入题目进行搜索" v-model="title" class="input-with-select">
							    <el-button @click="questionSearch(0)" slot="append" icon="el-icon-search"></el-button>
							  </el-input>
						  </el-col>
					</el-row>
 				</el-col>
			</el-row>
 		</div>
 		
 		<div class="question_list">
 			<el-table
	      :data="tableData"
	      style="width: 100%">
	      <el-table-column
	        prop="bundle"
	        label="题型"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="pid"
	        label="分类"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="title"
	        label="试题标题">
	        <template slot-scope="scope">
	         	<span v-html="scope.row.title"></span>
	        </template>
	      </el-table-column>
	      <el-table-column
	        prop="difficulty"
	        label="难度">
	      </el-table-column>
	      <el-table-column
	        prop="operator"
	        label="创建人">
	      </el-table-column>
	       <el-table-column
	        label="是否有效">
	        <template slot-scope="scope">
	         	<span >{{scope.row.is_vaild == 1 ? '有效':"无效"}}</span>
	        </template>
	      </el-table-column>
	       <el-table-column
	        label="操作">
	        <template slot-scope="scope">
	        <el-button
		        @click="editionDate(scope.row)"
		        type="text"
		        size="small">
		          	编辑
		        </el-button>
		        <el-button @click="deleteItem(scope.row.quest_no,scope.$index)" type="text" style="color:red;" icon="el-icon-delete" ></el-button>
	      	</template>
	      </el-table-column>
	    </el-table>
 		</div>
 		<div class="footer">
 			<el-pagination
			  background
			  :current-page="pageNum"
			  :page-size="50"
			  layout="prev, pager, next"
			  :total="totalCount"
			  @current-change="currentChange">
			</el-pagination>
 		</div>
  </div>
</template>

<script>
    import { questionSearch,questionDelete,Login} from '@/assets/util/api.js'
  export default {
    data() {
      return {
      	access_token:"",
      	tableData: "",
      	totalCount:0,
      	pageNum:0,
      	bundle:"",
      	pid:"",
      	levelIn:"",
      	title:"",
      };
    },
    created(){
    	
    },
     watch:{
    	'$route' (to, from) {this.questionSearch(0);this.pageNum=0;},
    },
    mounted(){
     	this.access_token = this.inStorage("get","access_token");
      this.questionSearch();
    },
    methods: {
     goAdd(){
     	this.RouterTo(this,"/itemBank/addItemBank/addTestQm")
     },
     questionSearch(pageNum){
     	var _this = this;
     	var topic =  this.inStorage("get","topic");
     	var params = {
     		access_token:this.access_token,
     		page_num:pageNum,
     		topic:topic,
     		bundle:this.bundle,
     		pid:this.pid,
     		title:this.title,
     		content:"",
     		difficulty:this.levelIn,
     	}
     	questionSearch(this,params).then((res)=>{
     		console.log(res);
	     		if(res.data.state==true){
	     			_this.tableData = res.data.data.current_data;
	     			_this.totalCount = res.data.data.total_count;
	     			_this.bundle = "";
		      	_this.pid = "";
		      	_this.levelIn = "";
		      	_this.title = "";	
	     		}
     		});
     },
     deleteItem(quest_no,index){
     	var _this = this;
     	console.log(index)
     	var params = {
     		access_token:this.access_token,
     		quest_no:quest_no,
     	}
     	questionDelete(this,params).then((res)=>{
     		console.log(res)
     		if(res.data.state == true){
     			_this.tableData.splice(index,1);
     			_this.$message.success("删除成功！");
     		}
     		
     		if(res.data.code){
				  _this.$message.error(_this.publicMsg(res.data.code,res.data.error));
				}
     	})
     },
     	//获取试题难度
      levelCheck(e){
       	this.levelIn = e;
      },
      currentChange(e){
      	this.pageNum = e;
      	this.questionSearch(e);
      },
      clearSearch(){
      	this.bundle = "";
      	this.pid = "";
      	this.levelIn = "";
      	this.title = "";
      	this.questionSearch(0);
      },
      editionDate(row){
      	this.inStorage("set","editor",row);
      	this.RouterTo(this,"itemBank/addItemBank/addTestQm",{type:row.bundle_t})
      }
    }
  }
 
</script>
<style lang="scss" scoped>
	.itembank{
		position: relative;
	}
  .top_item{
  	margin-bottom: 10px;
  	margin-right: 20px;
  	padding-bottom:40px;
  	box-sizing: border-box;
  }
  .search_advanced{
  	margin-top: 10px;
  	margin-right: 20px;
  	color: #1A8CFE;
  	cursor: pointer;
  	i{
  		margin-left: 3px;
  		transform: translateY(-30%);
  	}
  }
  .item_top_headder{
  	box-shadow: 0 1px 2px -2px #999;
  }
  .question_list{
  	margin-top: 2px;
  	width: 100%;
  }
  .footer{
  	width: 100%;
  	float: right;
  	text-align: right;
  	margin-top: 30px;
  	margin-right: 20px;
  }
</style>

